<template>
	<view id="posts">
		<view class="comm">
			<classify @Child="selestClassifyIndex" :childIndex="Number(childIndex)" :postsAllTitle="title"
				:iconFlag="true" :list="postsAllText">
			</classify>

		</view>
		<view class="textType">
			<view class="textarea">
				<view class="posts_title title1">
					<!-- <view class=" custom-icon custom-icon-biaotiqian"></view> -->
					<view class="title">输入标题</view>
				</view>
				<u--input placeholder="请输入标题" v-model="titleInput" border="surround" clearable></u--input>
			</view>
			<view class="textarea">
				<view class="posts_title title1">
					<!-- <view class=" custom-icon custom-icon-biaotiqian"></view> -->
					<view class="title">输入内容</view>
				</view>
				<u--textarea v-model="contentText" :placeholderStyle="`font-size: 24rpx;`" placeholder="再次编辑,发表你的看法"
					:maxlength="200" count></u--textarea>
			</view>
			<view class="ImageUpload">
				<view class="posts_title">
					<!-- <view class=" custom-icon custom-icon-biaotiqian"></view> -->
					<view class="title">上传图片/视频音频</view>
				</view>
			</view>
			<view class="info-box">
				<view class="fontType" v-if="type==''">请确保上传的图片清晰真实</view>

				<!-- v-if="type == 'video'" -->

				<!-- v-if="type == 'sound'" -->

			</view>
			<view class="icon-box ssss">
				<block v-if="type == 'image'">
					<view class="image-list" v-for="(item, index) in imgArr" :key="index">
						<view class="icon">
							<image src="/static/PlayWith/close2.png" mode="widthFix" @click="deleteImage(index)">
							</image>
						</view>
						<view class="item">
							<image class="image" :src="item" mode="widthFix"></image>
						</view>

					</view>
				</block>
				<view class="icon-box-type" v-if="type=='' || type== 'image'">
					<view>
						<image src="/static/PlayWith/pic.png" mode="widthFix" @click="upload('image')"></image>
					</view>
				</view>
				<block v-if="type == 'video'">
					<view class="video">
						<video id="myVideo" v-if="videoPath" :src="videoPath" :controls="false"
							:show-fullscreen-btn="true" :enable-progress-gesture="false">
							<cover-image class="icon" src="/static/PlayWith/close2.png"
								@click="deleteSound('videoPath')">
							</cover-image>
						</video>

					</view>
				</block>
				<view class="icon-box-type" v-if="type=='' || type== 'video'">
					<view>
						<image src="/static/PlayWith/video.png" mode="widthFix" @click="upload('video')"></image>
					</view>
				</view>
				<!-- <block v-if="type == 'sound'">
					<view class="sound">
						<image class="sound-bg" src="/static/logo.png" mode="widthFix"></image>
						<image v-if="soundType" @click="soundPlay(1)" class="play"
							src="/static/PlayWith/soundSuspend.png" mode=""></image>
						<image v-else @click="soundPlay(2)" class="play" src="/static/PlayWith/soundPlay.png" mode="">
						</image>
						<image class="icon" src="/static/PlayWith/close2.png" mode="widthFix"
							@click="deleteSound('soundPath')">
						</image>
					</view>
				</block> -->
				<!-- <view class="icon-box-type" v-if="type=='' || type== 'sound'">
					<view>
						<image src="/static/PlayWith/sound.png" mode="widthFix" @click="uploadSound('sound')"></image>
					</view>
				</view> -->

			</view>

			<view class="vote">
				<view class="">
					<view class="opusList_left">
						<!-- <view class="custom-icon custom-icon-biaotiqian"></view> -->
						<view>权限管理</view>
					</view>
					<view class="opusList_radioRight">
						<u-radio-group v-model="schemeValue" placement="column" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" activeColor="#00e000"
								v-for="(item, index) in schemeList" :key="index" :label="item.name" :name="item.id"
								@change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="money" v-if="schemeValue===2">
						<view class="money_type">单次价格
							<view>
								<u--input @blur="oneBlur" placeholder-style="font-size:24rpx;color:#c3c3c3" placeholder="点击输入" v-model="oneMoney" border="bottom"
									clearable></u--input>
							</view>
						</view>
						<view class="money_type">月度价格
							<view><u--input @blur="MonthBlur" placeholder-style="font-size:24rpx;color:#c3c3c3" placeholder="点击输入" v-model="monthMoney" border="bottom"
									clearable></u--input></view>
						</view>
						<view class="money_type">季度价格
							<view>
								<u--input @blur="quarterBlur" placeholder-style="font-size:24rpx;color:#c3c3c3" placeholder="点击输入" v-model="quarterMoney" border="bottom"
									clearable></u--input>
							</view>
						</view>
					</view>
				</view>
				<!-- 延迟发布 -->
				<view class="u-checkboxType">
					<u-checkbox-group v-model="fabu1" @change="checkboxChange" :borderBottom="true" placement="column"
						iconPlacement="right">
						<u-checkbox style="border: none;" shape="circle" activeColor="#00e000" label-color="#000"
							v-for="(item, index) in fabu" :key="index" :label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view>
					<uni-datetime-picker returnType="timestamp" v-if="timingValue" v-model="birthday"
						@change="changeLog($event)" />
				</view>
				<!-- 兑换码 -->
				<view class="u-checkboxType">
					<u-checkbox-group v-model="cdk1" @change="checkboxChangeByCDK" :borderBottom="true"
						placement="column" iconPlacement="right">
						<u-checkbox style="border: none;" shape="circle" activeColor="#00e000" label-color="#000"
							v-for="(item, index) in cdk" :key="index" :label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="CDKCount" v-if="cdkShow">
					兑换码数量
					<view><u--input placeholder="点击输入"  placeholder-style="font-size:24rpx;color:#c3c3c3" v-model="experienceNum" border="bottom" clearable></u--input>
					</view>
				</view>
			</view>
		</view>

		<view class="vote">
			<view class="typest" @click="gotoJoin">
				<view class="opusList_left">
					<view>加入作品集</view>
				</view>
				<view class="opusList_right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			<u-scroll-list :indicator="false">
				<view class="opusMapCover_view" v-for="(item,index) in opusMapList" :key="item">
					<view class="img">
						<image :src="item.cover" mode="aspectFill" />
					</view>
					<view class="name">{{item.title}}</view>
				</view>
			</u-scroll-list>
		</view>
		<view class="posts-button">
			<view class="submit" v-if="!updAndDelShow">
				<button @click="submit(1)">发布动态</button>
			</view>
			<view class="submit" v-else>
				<button @click="Updsubmit(1)">修改动态</button>
			</view>
			<view class="Save" @click="submit(2)" v-if="!updAndDelShow">
				<button>保存草稿</button>
			</view>
			<view class="Save" @click="Updsubmit(2)" v-else>
				<button>保存草稿</button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view style="height: 100rpx;"></view>

	</view>
</template>

<script>
	import {
		watch
	} from "vue";
	import {
		uploadFile,
		uploadMp3File,
		uploadImgVideo,
		checkPermission
	} from '@/store/upload.js';
	import {
		mapState,
		mapActions
	} from "vuex";
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {

				uuid: '',
				updAndDelId: '', //修改或删除才用
				childIndex: '', //修改或删除才用
				updAndDelShow: false, //修改或删除才用
				upadId: '',
				updOpusList: {}, //修改或删除才用

				defaultDate: '',
				activeIndex: 1, // 当前激活的标签索引(选择模式)
				classifyIndex: '', //发布分区索引
				contentText: '',
				titleInput: '', //标题
				images: "", //上传后的图片地址
				video: "", //视频
				voice: "", //音频

				schemeIndex: '', //选择方案的索引
				OpusIndex: '', //作品集


				programmeId: 1, //选择方案的索引
				portfolioId: '', //作品集
				timingType: 1, //定时发送1正常2定时
				birthday: "", //定时发布时间
				experienceType: 1, //体验码1不生成2生成
				experienceNum: '', //体验码数量
				oneMoney: '', //单次价格
				monthMoney: '', //月度价格
				quarterMoney: '', //季度价格
				cdkShow: false, //是否生成体验码
				timingValue: false, //是否开启定时发布


				fields: {
					titleInput: this.titleInput,
					activeIndex: this.activeIndex,
					classifyIndex: this.classifyIndex,
					contentText: this.contentText,
					imgArr: this.imgArr,
					programmeId: this.programmeId,
					portfolioId: this.portfolioId,
				},
				// 作品集list
				opusMapList: [],
				opusMapTile: '作品集',
				title: '发布分区',
				question: '', //投票问题1
				answer: '', //投票问题2
				range: '',
				accept: 'video', //上传类型
				fileList1: [], //上传图片/视频
				maxlength: 110,
				tagTextList: ['图片', '视频', '音频'],
				schemeList: [],
				schemeValue: '',
				postsAllTItle: '发布分区',
				postsAllText: [],
				postsActiveIndex: null, // 用于存储当前点击的索引
				imgs: [],
				type: '', //image  video  sound
				maxImage: 15,
				imgArr: [],

				soundPath: '',
				soundType: true, // 声音播放状态




				intervalTime: 0,
				timer: null,
				isRecord: false, // 记录状态,录音中或者是未开始
				voicePath: '', // 语音路径
				soundTextShow: false, // 录音转文字
				soundTextTitle: '语音转文字',
				soundText: '按住说话',
				fabu1: [],
				fabu: [{
					name: "定期发布",
					disabled: false
				}],
				cdk1: [],
				cdk: [{
					name: "兑换码",
					disabled: false
				}]
			}
		},



		onLoad(o) {
			if (o.id) {
				console.log(o.id, 'dddddddddddddd')
				this.upadId = o.id;
				this.updAndDelShow = true;
				this.getDynamicDetails(o.id)
			}


			// 监听事件
			innerAudioContext.onEnded(() => {
				this.soundType = true
			})
			uni.$on('successPath', (res) => {
				uni.showLoading({
					title: '上传中'
				})
				uploadFile([res]).then(res2 => {
					this.soundPath = res2[0]
					this.type = 'sound'
					uni.hideLoading()
				})
			})

		},
		onShow() {
			uni.$on('knot', (res) => {
				console.log("res", res.listData);
				this.portfolioId = res.listData;
			});
		},
		watch: {
			portfolioId(newValue, oldValue) {
				this.getDetail();
			},
			activeIndex(newValue, oldValue) {
				console.log("this.activeIndex,", this.activeIndex);
			},
			experienceType(newValue, oldValue) {
				console.log(newValue === 2)
				this.cdkShow = newValue === 2;
			},
			timingType(newValue, oldValue) {
				this.timingValue = newValue === 2;
			},
			schemeValue(newValue, oldValue) {
				this.schemeValue = newValue


			}

		},




		mounted() {




			// 获取动态分类列表
			this.$api.getCateList().then(res => {
				this.postsAllText = res.data;
			});
			// 选择方案分类
			this.$api.getProgrammeList().then(res => {
				this.schemeList = res.data;
				console.log("this.schemeList", this.schemeList);
			})

		},
		methods: {
			checkboxChange(n) {
				if (n.length > 0) {
					this.timingType = 2;
				} else {
					this.timingType = 1;
					this.birthday = '';
				}
				console.log("this.timingType", this.timingType)
			},



			/* changeCDK(e) {
				console.log(e)
				if (e) {
					this.experienceType = 2
					this.cdkShow = true
				} else {
					this.experienceType = 1;
					this.cdkShow = false;
					this.experienceNum = '';
				}
			}, */



			checkboxChangeByCDK(n) {
				if (n.length > 0) {
					this.experienceType = 2
					this.cdkShow = true
				} else {
					this.experienceType = 1;
					this.cdkShow = false;
					this.experienceNum = '';
				}
			},























			getDynamicDetail() {
				// dynamicDetail

				this.$api.getDynamicDetail({
					id: this.updAndDelId
				}).then(res => {
					console.log("res=>", res.data)
					const updAndDel = res.data;
					this.childIndex = parseFloat(updAndDel.dynamic_cate_id); //发布分区索引
					this.contentText = updAndDel.content;
					this.titleInput = updAndDel.title; //标题
					// this.images = updAndDel.slider; //上传后的图片地址
					this.fileList1 = imageArray.map(item => item.imagePath);
					this.video = updAndDel.video; //视频
					this.voice = updAndDel.voice; //音频
					this.schemeIndex = updAndDel.programme_id.id; //选择方案的索引
					console.log(this.schemeIndex, '，999999', updAndDel.programme_id.id)
					this.OpusIndex = parseFloat(updAndDel.portfolio_ids);; //作品集
					console.log(this.childIndex, "+", this.OpusIndex)
				})
			},



			getDetail() {
				// 确保 ids 是唯一的
				const ids = Array.from(new Set(this.portfolioId.split(',')));
				this.opusMapList = []; // 这里清空数组
				if (ids.length > 0) { // 仅在有 ID 时进行请求
					Promise.all(ids.map(id => {
							return this.$api.getDetail({
								id
							}); // 对每个 ID 发送 API 请求
						}))
						.then(responses => {
							responses.forEach((res, index) => {
								this.opusMapList.push(res.data);
								console.log(`作品集列表 for ID ${ids[index]}:`, this.opusMapList);
							});
						})
						.catch(error => {
							console.error("请求出错:", error);
						});
				} else {
					console.log("没有有效的 ID 进行请求");
				}
			},
			quarterBlur() {
				if (!this.quarterMoney && this.schemeValue == 2) {
					/* this.$refs.uToast.show({
						message: '金额不能为空',
						type: 'error',
					}) */
					return false;
				}
				return true;
			},
			MonthBlur() {
				if (!this.monthMoney && this.schemeValue == 2) {
					/* this.$refs.uToast.show({
						message: '金额不能为空',
						type: 'error',
					}) */
					return false;
				}
				return true;
			},
			oneBlur() {
				if (!this.oneMoney && this.schemeValue == 2) {
					/* this.$refs.uToast.show({
						message: '金额不能为空',
						type: 'error',
					}) */
					return false;
				}
				return true;
			},
			timeDingshi() {
				if (!this.birthday && this.timingType == 2) {

					return false;
				}
				return true;
			},
			count() {
				if (this.experienceType == 2 && !this.experienceNum) {

					return false;
				}
				return true;
			},
			// 跳转全部作品集
			gotoJoin() {
				uni.navigateTo({
					url: "/pages/home/joinOpusMap/joinOpusMap?id=" + this.uuid
				})
			},
			// 单选框的方法
			radioChange(value) {
				console.log("单选框值改变:", value);



			},
			groupChange(value) {
				this.programmeId = this.schemeValue;
			},
			getDynamicDetails(o) {
				// dynamicDetail
				this.$api.getDynamicDetail({
					id: o
				}).then(res => {
					console.log(res.data)
					this.uuid = res.data.uuid.id
					this.updOpusList = res.data
					this.titleInput = res.data.title
					this.contentText = res.data.content
					this.childIndex = res.data.dynamic_cate_id
					this.imgArr = res.data.slider
					this.videoPath = res.data.video
					this.voicePath = res.data.voice
					this.portfolioId = res.data.portfolio_ids
					this.schemeValue = res.data.programme_id.id

					this.oneMoney = res.data.one_money
					this.monthMoney = res.data.month_money
					this.quarterMoney = res.data.quarter_money
					this.timingType = res.data.timing_type
					this.birthday = res.data.timing
					this.experienceType = res.data.experience_type
					this.experienceNum = res.data.experience_num
					console.log("this.schemeValue", this.schemeValue, ",programme_id", res.data
						.programme_id.id)
				})

			},

			selestClassifyIndex(data) {
				this.classifyIndex = data
				console.log("父", data)
			},

			/*  */

			submit(index) {
				console.log(",this.timingType", this.timingType, ",this.experienceType", this.experienceType)
				const oneValid = this.oneBlur();
				const monthValid = this.MonthBlur();
				const quarterValid = this.quarterBlur();
				const countValid = this.count();
				const timeValid = this.timeDingshi();

				console.log("金额", this.quarterBlur(), ",", this.count());
				const allFilled = Object.values(this.fields).every(value => value);
				if (!allFilled && oneValid && monthValid && quarterValid && countValid && timeValid) {
					console.log("发布")
					this.$api.getReleased({
						title: this.titleInput,
						dynamic_cate_id: this.classifyIndex,
						slider: this.imgArr,
						content: this.contentText,
						video: this.videoPath,
						voice: this.voicePath,
						portfolio_ids: this.portfolioId,
						programme_id: this.programmeId,
						types: index,
						one_money: this.oneMoney,
						month_money: this.monthMoney,
						quarter_money: this.quarterMoney,
						timing_type: this.timingType,
						timing: this.birthday,
						experience_type: this.experienceType,
						experience_num: this.experienceNum,
					}).then(res => {
						if (res.code == 1) {
							uni.showModal({
								content: "发布成功",
								success: function(res) {
									if (res.confirm) {
										/* uni.reLaunch({
											url: "/pages/posts/posts"
										}) */
										uni.switchTab({
											url: '/pages/tabBarHome/home' // 替换为目标页面的路径
										});
									} else if (res.cancel) {
										uni.reLaunch({
											url: "/pages/posts/posts"
										})
									}
								}
							})
						}
					})

				} else {
					this.$refs.uToast.show({
						message: '存在没有填写的值',
						type: 'error',
					});
				}

			},

			// 清空操作
			del() {
				this.titleInput = ''
				this.classifyIndex = ''
				this.imgArr = ''
				this.contentText = ''
				this.videoPath = ''
				this.voicePath = ''
				this.portfolioId = ''
				this.programmeId = ''
				this.oneMoney = ''
				this.monthMoney = ''
				this.quarterMoney = ''
				this.timingType = ''
				this.birthday = ''
				this.experienceType = ''
				this.experienceNum = ''
			},

			Updsubmit(index) {

				const oneValid = this.oneBlur();
				const monthValid = this.MonthBlur();
				const quarterValid = this.quarterBlur();
				const countValid = this.count();
				const timeValid = this.timeDingshi();
				const allFilled = Object.values(this.fields).every(value => value);
				if (!allFilled && oneValid && monthValid && quarterValid && countValid && timeValid) {
					this.$api.getDynamicEdit({
						id: this.upadId,
						title: this.titleInput,
						dynamic_cate_id: this.classifyIndex,
						content: this.contentText,
						slider: this.imgArr,
						video: this.videoPath,
						voice: this.voicePath,
						portfolio_ids: this.portfolioId,
						programme_id: this.programmeId,
						types: index,
						one_money: this.oneMoney,
						month_money: this.monthMoney,
						quarter_money: this.quarterMoney,
						timing_type: this.timingType,
						timing: this.birthday,
						experience_type: this.experienceType,
						experience_num: this.experienceNum,
					}).then(res => {
						if (res.code == 1) {
							// this.del()
							uni.showModal({
								content: "修改成功",
								success: function(res) {
									if (res.confirm) {
										uni.reLaunch({
											url: "/pages/posts/posts"
										})
										uni.switchTab({
											url: '/pages/tabBarHome/home' // 替换为目标页面的路径
										});
									}
								}
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						message: '存在没有填写的值',
						type: 'error',
					});
				}

			},
			open(e) {
				console.log('open', e)
			},
			changeVote(e) {
				console.log('changeVote', e)
			},
			close(e) {
				console.log('close', e)
			},
			// 加入作品集
			selectOpus(index) {
				console.log(index)
			},
			// 定时发布
			/* change(e) {
				console.log("e", e)
				if (e) {
					this.timingType = 2;
				} else {
					this.timingType = 1;
					this.birthday = '';
				}
			}, */
			changeLog(e) {

				this.birthday = (e / 1000);
				console.log("this.birthday", this.birthday)
			},

			setActive(index) {
				this.postsActiveIndex = index; // 更新当前激活的索引
			},

			deleteSound(str) {
				this.videoPath = ''
				this.type = ''
			},
			deleteImage(index) {
				this.imgArr.splice(index, 1)
				this.maxImage++
				if (this.imgArr.length == 0) {
					this.type = ''
				}
			},
			// 上传音频
			uploadSound(str) {
				uni.navigateTo({
					url: '/pages/home/publish/record'
				})
			},
			// 音频播放
			soundPlay(type) {
				if (type == 1) {
					this.soundType = false
					innerAudioContext.src = this.soundPath
					innerAudioContext.play();
				} else {
					this.soundType = true
					innerAudioContext.stop();
				}
			},
			// 上传文件
			upload(str) {
				console.log(str, '传参')
				uploadImgVideo(str, this.maxImage >= 9 ? 9 : this.maxImage).then(res => {
					this.maxImage -= res.length
					this.type = str
					if (str == 'image') {
						this.imgArr = this.imgArr.concat(res)
					} else if (str == 'video') {
						if (!this.videoPath) { // 只有当视频路径为空时才更新
							this.videoPath = res[0]
						}
					}
				})
			},
			onUnload() {
				uni.$off('successPath')
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-input {
		border-radius: 15rpx !important;
		background-color: #f6f6f6;
	}
	
	::v-deep .u-border-bottom{
		border: none !important;
	}

	::v-deep .u-textarea {
		background-color: #f6f6f6 !important;
	}

	::v-deep .u-textarea__count {
		background-color: #f6f6f6 !important;
	}

	::v-deep .u-cell__body {
		padding: 20rpx 0 !important;
		/* 修正为 20rpx */
	}

	::v-deep .u-collapse-item__content__text {
		padding: 0 !important;
	}

	.selected {
		background-color: #f9f9f9;
		/* 选中时背景色 */
		color: #f37462;
		/* 选中时字体颜色 */
	}



	#posts {
		background-color: #f6f6f6;
		padding-top: 20px;
	}

	.opusList {
		width: 100%;

		view {
			line-height: 2;
			font-size: 30rpx;
			text-indent: 2.5em;
		}
	}

	.opusList.active {
		/* 新增：选中项的样式 */
		background-color: #f9f9f9;
		/* Active background color */
		color: #ff6600;
		/* Active text color */
	}

	.posts_title {
		display: flex;
		align-items: center;
	}

	.comm {
		width: 90%;
		margin: auto;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.posts_choose {
		width: 90%;
		margin: auto;

		.posts_choose_name {
			line-height: 3;
		}

		.posts_choose_tag {
			display: flex;
			justify-content: space-around;

			view {
				width: 80%;
			}
		}
	}

	.posts_all {
		width: 100%;
		border-radius: 20rpx;

		.top {
			height: 80rpx;
			display: flex;
		}
	}

	.textType {
		width: 90%;
		margin: auto;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 10px;

		.textarea {
			width: 90%;
			margin: auto;
			font-size: 24rpx;
			padding: 20rpx 0;

			.title {
				font-size: 35rpx !important;
				margin: 10rpx 0;
			}

			.title1 {
				font-size: 35rpx !important;
				margin: 10rpx 0;
				// border-bottom: 2rpx #f1f1f1 solid;
			}

			.textCount {
				display: flex;
				justify-content: flex-end;
				color: #b7b7b7;
			}
		}
	}


	.ImageUpload {
		width: 90%;
		margin: auto;

		.title {
			font-size: 35rpx;
		}

		.upload {
			display: flex;
			flex-wrap: wrap;
			margin: 30rpx 0;
			color: #ff6700;

			image {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				margin: 0 20rpx;
			}
		}
	}

	.vote {
		width: 90%;
		margin: auto;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.typest {
			width: 90%;
			margin: auto;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:10rpx 0;
		}

		.CDKCount {
			width: 90%;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 130rpx;
				border-radius: 10rpx;
			}
		}

		.u-checkboxType {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #f6f6f6;
			margin: 20rpx 0;
			border-radius: 20rpx;

			::v-deep .u-checkbox-group {
				width: 90%;
				margin: auto;
			}
		}

		.opusMapCover_view {
			width: 220rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 20rpx;

			.img {
				image {
					width: 220rpx;
					height: 220rpx;
					border-radius: 20rpx;
				}
			}

			.name {
				width: 220rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				// padding: 20rpx 0;
			}
		}

		.opusList_left {
			display: flex;
			align-items: center;
		}

		.CDKtype {
			display: flex;
			width: 30%;
			align-items: center;
			justify-content: flex-end;
		}

		.opusList_radioRight {
			width: 70%;
			// margin: auto;
			margin-top: 40rpx;

			::v-deep .u-radio-group--column {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			::v-deep .u-radio[data-v-5dfbf8b1] {
				/* width: 110px; */
				display: flex;
				overflow: hidden;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: center;

			}

			::v-deep .u-radio__text {
				margin-right: 10rpx;
			}
		}

		.money {
			width: 90%;
			margin: auto;

			.money_type {

				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0;

				view {
					width: 130rpx;
					border-radius: 10rpx;
				}

				::v-deep .u-input {
					height: 100%;
				}
			}

		}

	}

	.delayType {
		display: flex;
		align-items: center;

		.delay {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.Permissions_type {
		width: 90%;
		margin-left: auto;
		margin-top: 20rpx;

		.PermissionsInput {
			width: 45%;
			display: flex;
			align-items: center;

			.custom-placeholder::placeholder {
				font-size: 24rpx;
				/* 设置placeholder文字大小 */
			}
		}
	}

	// 移除多余的闭合大括号

	.posts-button {
		width: 80%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-around;

		button {
			// width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #fff;
		}

		.submit {
			margin: 40rpx 0;
			width: 40%;

			.custom-icon-dingshifabu {
				position: relative;
				left: 13rem;
				bottom: 1rem;
				// #ifdef H5
				left: 17rem;
				// #endif
			}

			button {
				border-color: #ff6600;
				background-color: #ff6600;
			}
		}

		.Save {
			width: 40%;

			button {
				border-color: #c9c9c9;
				background-color: #c9c9c9;
			}
		}
	}

	.ssss {
		display: flex;
		flex-wrap: wrap;

		.image-list {
			width: 170rpx;
			height: 170rpx;
			// border: 1px #c5c5c5 solid;
			// display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;

			.item {

				width: 100%;

				.image {
					position: relative;
					top: -40rpx;
					width: 100%;
					border-radius: 20rpx;
				}
			}

			.icon {
				width: 30rpx;
				float: right;
				position: relative;
				right: 0;
				top: 10rpx;
				z-index: 888;

				image {
					width: 100%;
				}
			}

		}

		.video {
			width: 170rpx;
			height:170rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
			border-radius: 10rpx;
			
			#myVideo {
				position: relative;
				z-index: 1 !important;
				width: 170rpx;
				height:170rpx;
				border-radius: 10rpx;
			}

			.icon {
				z-index: 999999;
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}
	}

	.icon-box-type {
		display: flex;

		view {
			width: 170rpx;
			height: 170rpx;
			// border: 1px #c5c5c5 solid;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;
		}
	}

	.fontType {
		font-size: 24rpx;
		color: #505050;
	}

	.icon-box {
		margin: 30rpx 24rpx;



		image {
			width: 50rpx;
			margin-right: 24rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.info-box {
		margin-bottom: 20rpx;
		margin: 0 30rpx;
		padding: 20rpx 0;

		.image-list {
			display: flex;
			flex-wrap: wrap;

			.item {
				position: relative;
				width: 23%;
				height: 150rpx;
				margin: 1%;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

				.icon {
					width: 40rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
		}



		.sound {
			position: relative;
			width: 200rpx;
			height: 200rpx;

			.sound-bg {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}

			.sound-bg::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.icon {
				position: absolute;
				z-index: 99;
				width: 40rpx;
				top: 10rpx;
				right: 10rpx;
			}

			.play {
				position: absolute;
				top: 0;
				left: 0;
				width: 100rpx;
				height: 100rpx;
				margin-left: 50rpx;
				margin-top: 50rpx;
			}
		}
	}
</style>